<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>会员升级</title>
    <link rel="stylesheet" type="text/css" href="./static/css/app.css">
</head>
<body>
<div id="app" class="hysj-page">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <div class="go-back"><img src="./static/images/go-back.png" alt=""></div>
                    <div class="text">会员升级</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>
    <!-- 顶部 -->
     <div class="top-wrap">
        <div class="bg-list">
            <img src="./static/images/hysj-bg1.png" alt="">
            <img src="./static/images/hysj-bg2.png" alt="">
            <img src="./static/images/hysj-bg3.png" alt="">
            <img src="./static/images/hysj-th1.png" alt="">
            <img src="./static/images/hysj-th2.png" alt="">
            <img src="./static/images/hysj-th3.png" alt="">
        </div>
        <div class="content">
            <div class="user-info">
                <div class="left">
                    <img src="./static/images/avatar2.png" alt="">
                </div>
                <div class="right">
                    <div class="row-1">亲爱的XXXX，您好！</div>
                    <div class="row-2">恭喜您，您正在升级为一级达人</div>
                </div>
            </div>
            <div class="desc-wrap">
                <div class="desc">请按以下步骤选择商品升级</div>
                <div class="tips-box">说明</div>
            </div>
        </div>
     </div>
     <div class="product-wrap">
        <div class="product-box">
            <div class="title-wrap">
                <img src="./static/images/egg.png" alt="">
                <div class="title">① 请选择上级店铺商品</div>
                <img src="./static/images/egg.png" alt="">
            </div>
            <div class="subtitle-wrap">数量：1-5<span>金额：39/195</span></div>
            <div class="product-list">
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item active">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
         <div class="product-box">
            <div class="title-wrap">
                <img src="./static/images/egg.png" alt="">
                <div class="title">② 请选择公司商品</div>
                <img src="./static/images/egg.png" alt="">
            </div>
            <div class="subtitle-wrap">数量：1-5<span>金额：39/195</span></div>
            <div class="product-list">
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
         <div class="product-box">
            <div class="title-wrap">
                <img src="./static/images/egg.png" alt="">
                <div class="title">③ 请选择级别商品</div>
                <img src="./static/images/egg.png" alt="">
            </div>
            <div class="subtitle-wrap">数量：1-5<span>金额：39/195</span></div>
            <div class="product-list">
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item active">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="selected-img"><img src="./static/images/selected.png" alt=""></div>
                    <div class="product-image">
                        <img src="./static/images/product4.png" alt="">
                    </div>
                    <div class="product-title ellipsis-1">香奈儿果香香水香香水香香水</div>
                    <div class="bottom">
                        <div class="left"><span>￥</span>599</div>
                        <div class="right">
                            <div class="minus-wrap">
                                <img class="out" src="./static/images/minus.png" alt="">
                                <img class="in" src="./static/images/minus-in.png" alt="">
                            </div>
                            <div class="number">1</div>
                            <div class="add-wrap">
                                <img class="out" src="./static/images/add.png" alt="">
                                <img class="in" src="./static/images/add-in.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
     </div>
     <div class="commit-btn active">确定</div>
</div>
<script src="./static/js/common.js"></script>
</body>
</html>